<template>
  <a @click="handleClick" v-if="hasAuth">
    <slot>primary</slot>
  </a>
  <a-tooltip v-else :getPopupContainer="$commonFun.getPopupContainer">
    <template slot="title">
      <span>{{ $t('noSuchPermission') }}</span>
    </template>
    <span :disabled="true" class="disabledAuthTextWrap">
      <slot>操作</slot>
    </span>
  </a-tooltip>
</template>
<script>
export default {
  props: {
    // 按钮的权限key
    auth: {
      type: [String, Array],
      default: ''
    }
  },
  computed: {
    hasAuth () {
      // auth没有值的情况下，说明无需要权限验证；有值则需要验证是否拥有此权限
      if (!this.auth) {
        return true
      }
      let { auth } = this
      if (typeof this.auth === 'string') {
        auth = [this.auth]
      }
      return this.$hasPermission(auth)
    }
  },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    handleClick () {
      if (!this.hasAuth) {
        return
      }
      this.$emit('click')
    }
  }
}
</script>
<style scoped lang="less">
.disabledAuthTextWrap {
  color: rgba(0, 0, 0, 0.25)
}
</style>
